<template>
	<view class="container">
		<view class="img-box">
			<image src="https://car.jokerfan.com/files/img/2025/08/05/1754382551549375.png" mode="widthFix" class="img">
			</image>
		</view>
		<view class="main-box">
			<view class="form-main-box">
				<view class="form-content-box">
					<view class="code-btn-box">
						<view class="code-btn" @click="scanCodeBtn">扫码核销</view>
					</view>
					<view class="tip-box">
						<view class="tip-line"></view>
						<view class="tip-text">或手动输入卡号</view>
						<view class="tip-line"></view>
					</view>
					<view class="form-box">
						<view class="form-list-box">
							<view class="form-title">核销地点</view>
							<view class="form-input-box input-line-box">
								<view class="flex-1" @click="addressClick()">
									<u--input placeholder="请选择核销地点" prefixIcon="map-fill"
										prefixIconStyle="font-size: 22px;color: #909399" readonly
										v-model="addressVal"></u--input>
								</view>
							</view>
						</view>
						<view class="form-list-box">
							<view class="form-title">卡号</view>
							<view class="form-input-box">
								<u--input placeholder="请输入卡号" prefixIcon="coupon-fill"
									prefixIconStyle="font-size: 22px;color: #909399" v-model="formData.code"></u--input>
							</view>
						</view>
						<view class="form-list-box">
							<view class="form-title">核销码
							</view>
							<view class="form-input-box">
								<u--input placeholder="请输入密码" prefixIcon="lock-fill"
									prefixIconStyle="font-size: 22px;color: #909399" v-model="formData.pwd"></u--input>
							</view>
						</view>
					</view>
					<view class="form-btn-box" @click="btn">提交核销</view>
				</view>
				<u-picker :show="addressShow" keyName="address" ref="addressPicker" :columns="addressList"
					@confirm="addressConfirm" @cancel="addressShow = false"></u-picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.hasaddress()
		},
		data() {
			return {
				formData: {
					address_id: '',
					code: '',
					pwd: '',
				},
				addressVal: '',
				addressShow: false,
				addressList: []
			}
		},
		methods: {
			// index/check
			// code  pwd
			// https://car.jokerfan.com?code=275662890914722&pwd=060332
			addressClick() {
				this.addressShow = true;
			},
			addressConfirm(e) {
				this.addressVal = e.value[0].address;
				this.formData.address_id = e.value[0].id;
				this.addressShow = false;
			},
			hasaddress() {
				this.$func.request('/system/address').then(res => {
					this.addressList = [res.data.datas];
				})
			},
			scanCodeBtn() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						let hasData = this.getQueryParams(res.result)
						this.formData.code = hasData.code
						this.formData.pwd = hasData.pwd
					}
				});
			},
			getQueryParams(url) {
				// const urlPattern = /https?:\/\/[^\s$.?#].[^\s]*$/;
				const urlPattern = /https:\/\/youth.jokerfan.com[^\s]*$/;

				if (!urlPattern.test(url)) {
					uni.showToast({
						title: '二维码错误,无法识别',
						icon: 'none'
					})
					this.formData.code = '';
					this.formData.pwd = '';
					return null;
				}

				const params = {};
				const regex = /[?&]([^=#]+)=([^&#]*)/g;
				let match;

				while ((match = regex.exec(url))) {
					params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
				}
				return params;
				// console.log('解析的参数:', params);
			},

			btn() {

				if (this.formData.address_id == '') {
					uni.showToast({
						title: '请选择核销地点',
						icon: 'none'
					})
					return false
				}
				if (this.formData.code == '') {
					uni.showToast({
						title: '卡号不能为空',
						icon: 'none'
					})
					return false
				}

				if (this.formData.pwd == '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return false
				}

				uni.showLoading({
					title: '核销中,请稍等...',
				});



				this.$func.request('/index/check', this.formData, 'POST').then(res => {
					if (res.status_code == 200) {
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: '核销成功',
							showCancel: false, // 不显示取消按钮
							success() {
								// uni.reLaunch({
								// 	url: '/pages/index/user'
								// })
								this.formData.address_id = '';
								this.formData.code = '';
								this.formData.pwd = '';
							}
						});
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none'
						})

						this.formData.address_id = '';
						this.formData.code = '';
						this.formData.pwd = '';
					}
				}).catch(error => {
					uni.hideLoading()
					uni.showToast({
						title: '提交失败',
						icon: 'none'
					})
				})
			}
		},
	}
</script>

<style lang="scss">
	.container {
		background: #f4f8fd;
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.img {
		width: 100%;
		vertical-align: top;
	}

	.main-box {
		flex: 1;
		padding: 0 20rpx;
	}

	.form-main-box {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		height: 100%;
		margin-top: -30rpx;
		box-shadow: rgba(0, 0, 0, .2) 0rpx 10rpx 10rpx 5rpx;

	}

	.form-content-box {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		box-sizing: border-box;
	}

	.code-btn-box {
		text-align: center;
	}

	.code-btn {
		display: inline-block;
		padding: 28rpx 56rpx;
		background: linear-gradient(90deg, #216AFB, #5D9DFC);
		color: #fff;
		border-radius: 100rpx;
		font-weight: 600;
		// box-shadow: #0939FA 0 10rpx 10rpx 5rpx;
		box-shadow: rgba(9, 57, 250, .5) 0 5rpx 10rpx 5rpx;
		margin-top: 40rpx;
	}

	.tip-box {
		display: flex;
		align-items: center;
	}

	.tip-line {
		border-top: 2rpx solid #D8D8D8;
		flex: 1;
	}

	.tip-text {
		color: #707070;
		font-size: 26rpx;
		padding: 0 30rpx;
	}

	.form-title {
		margin: 20rpx 0 20rpx;
	}

	.form-btn-box {
		color: #fff;
		text-align: center;
		background: linear-gradient(180deg, #4566E8, #4163EB);
		box-shadow: rgba(0, 0, 0, .2) 0 5rpx 10rpx 5rpx;
		border-radius: 10rpx;
		padding: 30rpx 0;
	}
</style>